<template>
  <div class="M1">


    <div class="M1-1">


      <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :layout="'vertical'" size="large">
        <a-typography-title :heading="2">用户登录</a-typography-title>
        <a-typography-title :heading="5" style="margin-top: -8px">内江市东兴区综合行政执法智慧平台</a-typography-title>

        <a-form-item field="name" validate-trigger="blur" label="登录账号">
          <a-input v-model="form.name" placeholder="请输入登录账号"/>
        </a-form-item>
        <a-form-item field="password" label="登录密码" validate-trigger="blur">
          <a-input-password v-model="form.password" placeholder="请输入登录密码"/>
        </a-form-item>

        <a-form-item>

          <a-button long size="large" type="primary" html-type="submit">确认登录</a-button>


        </a-form-item>
      </a-form>


    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {LoginAjax} from '@/util/AjaxUtil.js'
import {Notification} from "@arco-design/web-vue";
import {useRouter}   from "vue-router";

 const router = useRouter();
const formRef = ref(null)

const rules = {
  name: [{required: true, message: '登录账号不能为空',},],
  password: [{required: true, message: '登录密码不能为空',},],
}

const form = reactive({
  name: '',
  password: '',


});
const handleSubmit = async () => {
  const res = await formRef.value.validate()
  if (res !== undefined) return

  const  response = await LoginAjax(  {"account": form.name, "password": form.password} )
  if (response.status!==200)  {
    Notification.error({title:'登录失败',content:'网络异常 请稍后再试！'})
    return
  }
 const  {code , message , data}   = response.data
  if (code !==0)  {
    Notification.error({title:'登录失败',content:message})
    return
  }


  const token = "Bearer " + data
  window.sessionStorage.setItem("token" , token)

  await router.push({path: '/pages/weighing'})
  Notification.success({title:'登录成功',content:'登录成功' ,})


}
</script>


<style scoped>

.M1 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
}

.M1-1 {
  display: flex;
  justify-content: start;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  width: 380px;
  padding: 24px 48px;
}
</style>